<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>添加爬虫规则</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <!-- CSS Files -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/css/material-bootstrap-wizard.css" rel="stylesheet" />

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="/static/css/demo.css" rel="stylesheet" />

    <!-- chart -->
    <link rel="stylesheet" href="/static/css/amazeui.css" />
    <link rel="stylesheet" href="/static/css/core.css" />
    <link rel="stylesheet" href="/static/css/menu.css" />
    <link rel="stylesheet" href="/static/css/index.css" />
    <link rel="stylesheet" href="/static/css/admin.css" />

    <style type="text/css">
        .selectting{
            background-color: #dedede !important;
        }
        .selected{
            background-color: #c2c2c2 !important;
        }
        .col-sm-12 .col-sm-3{
            width: 25%;
            margin-left: 0px;
            margin-right: 0px;
            display: inline-block;
        }
        .col-sm-12 .col-sm-4{
            width: 33.333%;
            margin-left: 0px;
            margin-right: 0px;
            display: inline-block;
        }
        .col-sm-12 .col-sm-6{
            width: 50%;
            margin-left: 0px;
            margin-right: 0px;
            display: inline-block;
        }
        
        .made-with-mk{
            width: 60px;
        }
        .made-with{
            left: 70px !important;
            top: 17px !important;
        }
        .btto{
        	border-top: 1px solid rgba(152, 166, 173, 0.2);
        	color: #98a6ad;
        }
    </style>
    
    <!-- start: Css -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

    <!-- plugins -->
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/datatables.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/animate.min.css"/>
    <link href="/static/css/style.css" rel="stylesheet">
    <!-- end: Css -->
</head>

<body style="overflow-y: auto;">
    <div class="image-container set-full-height" style="background-image: url('/static/img/wizard-book.jpg')">
        <!--   Creative Tim Branding   -->
        <a href="/pac/r/i/" id='logo_a'>
             <div class="logo-container">
                <div class="logo">
                    <img style="margin-top: -5px;" src="/static/img/new_logo.png">
                </div>
                <div class="brand">{{ user.username }}</div>
            </div>
        </a>

        <!--  Made With Material Kit  -->
        <a href="#" class="made-with-mk">
            <div class="brand">PAC</div>
            <div class="made-with">Made with <strong>pactera</strong></div>
        </a>

        <!--   Big container   -->
        <div class="container">
            <!-- row -->
            <div class="row">
                
                <div class="col-sm-8 col-sm-offset-2" style="margin: 0 auto; width: 100%;">
                    <!--      Wizard container        -->
                    <div class="wizard-container" style="margin:0 auto; padding-top: 50px;">
                        <div class="card" data-color="red" id="wizard">
                        		<!-- Start content -->
                    			<div class="am-g">
                                    <div class="am-u-md-6">
                                        <!-- Step Line -->
                                        <div class="card-box">
                                            <div  id="pie3" style="width: 100%;height: 400px;"></div>
                                        </div>
                                    </div>

                                    <div class="am-u-md-6">
                                        <!-- 大数据面积图  -->
                                        <div class="card-box">
                                            <div  id="shuju" style="width: 100%;height: 400px;"></div>
                                        </div>
                                    </div>
                    			</div>
                    			
                    			<div class="am-g">
                    				<div class="am-u-md-12">
                                        <!-- Step Line -->
                                        <div class="card-box">
                                            <div  id="pie3_3" style="width: 100%;height: 500px;"></div>
                                        </div>
                    				</div>
                    			</div>
                        </div>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!--  big container -->
        <div class="footer" style="margin-top: 30px;">
            <div class="container text-center">
                 made with <i class="fa fa-heart heart"></i> by <a href="#">pactera</a>
            </div>
        </div>
    </div>

</body>
    <!--   Core JS Files -->
    <script src="/static/js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="/static/js/jquery.bootstrap.js" type="text/javascript"></script>
		
    <!--  Plugin for the Wizard -->
    <script src="/static/js/material-bootstrap-wizard.js"></script>

    <!--  More information about jquery.validate here: http://jqueryvalidation.org/  -->
    <script src="/static/js/jquery.validate.min.js"></script>

    <!-- chart -->
    <script type="text/javascript" src="/static/js/charts/echarts.min.js" ></script>
    <!-- <script type="text/javascript" src="/static/js/charts/controlChart.js" ></script> -->

    <script type="text/javascript">
    

    var charto = {}; // 显示图形集合
     
    //饼状图1
    var pie3 = {};
    (function(){
        if(!document.getElementById("pie3"))return; 
    pie3 = echarts.init(document.getElementById("pie3"));

    option = {
        title : {
            text: '所有网址爬取状态',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['待爬取','爬取中','已爬取']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name: '状态',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                selectedMode: 'single',
                data:[
                    {value:1, name:'待爬取'},
                    {value:1, name:'爬取中'},
                    {value:1, name:'已爬取'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    pie3.setOption(option);
    })();


    //饼状大图
    var pie3_3 = {};
    var pie3_3_option = {};
    (function(){
        if(!document.getElementById("pie3_3"))return; 
        pie3_3 = echarts.init(document.getElementById("pie3_3"));
        var db_url_type = {{db_url_type|safe}};
        var db_url_type_name = {{db_url_type_name|safe}};
        var db_url_type_value = {{db_url_type_value|safe}};

        var db_service_type = {{db_service_type|safe}};
        var db_service_type_name = {{db_service_type_name|safe}};
        var db_service_type_value = {{db_service_type_value|safe}};

        var db_city= {{db_city|safe}};
        var db_city_name = {{db_city_name|safe}};
        var db_city_value = {{db_city_value|safe}};

        var db_area= {{db_area|safe}};
        var db_area_name = {{db_area_name|safe}};
        var db_area_value = {{db_area_value|safe}};

        var db_province= {{db_province|safe}};
        var db_province_name = {{db_province_name|safe}};
        var db_province_value = {{db_province_value|safe}};
        
        
        var db_name = [];
        db_name.push(...db_url_type_name);
        // db_name.push(...db_service_type_name);
        // db_name.push(...db_city_name);
        db_name.push(...db_area_name);
        db_name.push(...db_province_name);

    option = {
        title : {
            text: '数据库实时主数据',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top: 'top',
            bottom: '0',
            data: db_name
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name: '数据状态',
                type: 'pie',
                selectedMode: 'single',
                label: {
                    normal: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    }
                },
                radius : '55%',
                center: ['35%', '50%'],
                data: db_url_type,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }, {
                name:'区域',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                center: ['80%', '50%'],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: db_area
            },
            {
                name:'省份',
                type:'pie',
                selectedMode: 'single',
                radius: ['40%', '55%'],
                center: ['80%', '50%'],
                data: db_province
            }
        ]
    };
    pie3_3_option = option;
    pie3_3.setOption(pie3_3_option);
    })();

    var shuju = {};
    //大数据量面积图
    (function(){
        var obj = document.getElementById("shuju");
        var cache_b = true;// '{{cache_b|safe}}'=='True';
        if(!cache_b || !obj)return;
        shuju = echarts.init(obj);

        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

        var data = [Math.random() * 300];
        var fdata = [data[0] * -1.00];

        for (var i = 1; i < 100; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            var datav = Math.round((Math.random() - 0.5) * 20 + data[i - 1]);
            data.push(datav);
            fdata.push(datav * -1.00);
        }
        var cache_type = {{cache_type|safe}};
        var cache_type_value = {{cache_type_value|safe}};
        var cache_key = date;
        var cache_pass = data;
        var cache_time_error = data;
        var cache_find_cf = data;
        var cache_find_error = data;
        var cache_Exception = data;
        var cache_END = [];
        var cache_END_time = fdata;

        {% if cache_b == 'true' %}
            cache_key = {{cache_key|safe}};
            cache_pass = {{cache_pass|safe}};
            cache_time_error = {{cache_time_error|safe}};
            cache_find_cf = {{cache_find_cf|safe}};
            cache_find_error = {{cache_find_error|safe}};
            cache_Exception = {{cache_Exception|safe}};
            cache_END = {{cache_END|safe}};
            cache_END_time = [];
        {% endif %}

        for (var i in cache_END) {
            cache_END_time.push(cache_END[i] * -1.00);
        }

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            text: '每个网址爬取情况',
            x:'center'
        },
        legend: {
            top: '7%',
            data: cache_type_value
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: cache_key,
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
        }, {
            start: 0,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [
            {
                name: cache_type['cache_Exception'],
                type:'bar',
                stack: '总量',
                smooth:true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: '#d53a35'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: cache_Exception
            },
            {
                name: cache_type['cache_find_error'],
                type:'bar',
                stack: '总量',
                smooth:true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: 'rgb(255, 70, 131)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: cache_find_error
            },
            {
                name: cache_type['cache_find_cf'],
                type:'bar',
                stack: '总量',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: '#2f4554'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: cache_find_cf
            },
            {
                name: cache_type['cache_time_error'],
                type:'bar',
                stack: '总量',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: '#d48265'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: cache_time_error
            },
            {
                name: cache_type['cache_pass'],
                type:'bar',
                stack: '总量',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: '#4ff327'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: cache_pass
            },
            {
                name: cache_type['cache_END'],
                type:'bar',
                stack: '总量',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: 'rgb(0, 0, 0)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: cache_END_time
            }
        ]
    };
        shuju.setOption(option);

    })();

    // 定时更新
    function ttime(T){

        // 缓存数据
        var ttime = setInterval(function(){
            $.ajax({
                url:"/pac/chart/:/getcachechart()",
                data:{},
                type:"POST",
                dataType:"TEXT",
                success: function(rets1){
                    // console.info('/pac/chart/:/getcachechart()='+ rets1);
                    rets1 = eval('('+rets1+')');
                    if(!rets1){return;}
                    if(rets1.cache_b == 'true'){ // 判断是否成功

                    }else if(rets1.cache_b == 'end'){
                        clearInterval(ttime);
                    }else if(rets1.cache_b == 'false'){
                    }
                    if(rets1['cache_buid'] && rets1['cache_key'] && rets1['cache_END']){

                        var cache_END = rets1['cache_END'];
                        var cache_END_time = [];
                        for (var i in cache_END) {
                            cache_END_time.push(cache_END[i] * -1.00);
                        }

                        // 图2
                        var option_up = {xAxis: {data: rets1['cache_key']},
                                         series:[{data: rets1['cache_Exception']},
                                                {data: rets1['cache_find_error']},
                                                {data: rets1['cache_find_cf']},
                                                {data: rets1['cache_time_error']},
                                                {data: rets1['cache_pass']},
                                                {data: cache_END_time}]}
                        // console.info(option_up);
                        shuju.setOption(option_up);

                        // 图1
                        var option_up = {legend: {data: rets1['cache_buid_name']},series : [{data:rets1['cache_buid']}]};
                        // console.info(option_up);
                        pie3.setOption(option_up);

                    }
                }
            });
        }, T);

        // 数据库数据
        var ttime_db = setInterval(function(){
            $.ajax({
                url:"/pac/chart/:/getdbchart()",
                data:{},
                type:"POST",
                dataType:"TEXT",
                success: function(rets1){
                    // console.info('/pac/chart/:/getdbchart()='+ rets1);
                    rets1 = eval('('+rets1+')');
                    if(!rets1){return;}

                    var db_url_type = rets1['db_url_type'];
                    var db_url_type_name = rets1['db_url_type_name'];
                    var db_url_type_value = rets1['db_url_type_value'];

                    var db_service_type = rets1['db_service_type'];
                    var db_service_type_name = rets1['db_service_type_name'];
                    var db_service_type_value = rets1['db_service_type_value'];

                    var db_city= rets1['db_city'];
                    var db_city_name = rets1['db_city_name'];
                    var db_city_value = rets1['db_city_value'];

                    var db_area= rets1['db_area'];
                    var db_area_name = rets1['db_area_name'];
                    var db_area_value = rets1['db_area_value'];

                    var db_province= rets1['db_province'];
                    var db_province_name = rets1['db_province_name'];
                    var db_province_value = rets1['db_province_value'];
                    
                    
                    var db_name = [];
                    db_name.push(...db_url_type_name);
                    // db_name.push(...db_service_type_name);
                    // db_name.push(...db_city_name);
                    db_name.push(...db_area_name);
                    db_name.push(...db_province_name);


                    var option_up = {
                        legend: {data: db_name},
                        series : [{data: db_url_type}, 
                                  {data: db_area},
                                  {data: db_province}]
                    }
                    pie3_3.setOption(option_up);
                },
                error: function(e){
                    alert(e.statusText);
                    clearInterval(ttime_db);
                }
            });
        }, T*3/2);
    }
    ttime(1000);
    </script>

</html>

